<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        body{
            background: #eee;
        }
        @font-face {
            font-family: wending;
            src: url("dist/DIN Alternate Bold.ttf");
        }

        h1 {
            font-size: 28px;
            font-family: wending;
        }

        .dateinputer {
            line-height: 40px;
            height: 40px;
            margin: 10px 0;
            border: 1px solid #ccc;
            cursor: pointer;
            position: relative;
            /*top:10px;*/
            /*left:20px;*/
            padding: 0 6px;
            font-size: 12px !important;

        }

        #multiple {
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .flex-div {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-flow: column;
            margin-left: 30px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
<div class="flex-div">
    <span>weeknum 周次选择器</span>
    <div id='weeknum' class="dateinputer">

    </div>
</div>
<div class="flex-div" style="margin-left:400px;">
    <span>weeknumrange 周区间次选择器</span>
    <div id='weeknumrange' class="dateinputer">
    </div>
</div>
<div class="flex-div">
    <span>date 单日选择器</span>
    <a id="destroy">销毁日历</a>
    <div id='date' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>datetime 单日加时间选择器</span>
    <div id='datetime' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>month 月选择器</span>
    <div id='month' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>year 年选择器</span>
    <div id='year' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>daterange 日期区间选择器</span>
    <div id='daterange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>monthrange 月区间选择器</span>
    <div id='monthrange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>yearrange 年区间选择器</span>
    <div id='yearrange' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>week 周选择器</span>
    <div id='week' class="dateinputer">

    </div>
</div>
<div class="flex-div">
    <span>multiple 多日期选择器</span>
    <div id='multiple' class="dateinputer">

    </div>
</div>

</body>
<script type="text/javascript" src="./dist/xndatepicker.min.js"></script>
<script type="text/javascript">
    var date = new XNDatepicker(document.querySelector("#weeknumrange"), {
        format: 'YYYY-MM-DD',
        type: 'multiple',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
        multipleDates: ['2020-01-01', '2222-01-01'],//当为多选日期类型时的初始值
        shortList: [
            {
                name: "今天",
                value: { startTime: ['2021/02/01','2021-02-05','2020-01-08'], endTime: '2020-01-02' }
            }
        ],
        startTime: '',
        maxDate: '',
        firstDayOfWeek: 1,
        separator: ' ~ ',
        showType: 'modal',
        linkPanels: false,//面板联动
        showClear: true,//是否显示清除按钮
        autoConfirm: true,
        showShortKeys: true,
        autoFillDate: true,//自动变更element里面的值
    }, function (data) {
        console.log(data)
    })

    document.querySelector("#destroy").click(function () {
        date.destroy();
    })
    // var date = new XNDatepicker(document.querySelector("#date"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'daterange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     // minDate:'2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    //     disableDate: function (date, dayjs) {
    //         if (dayjs(date).format('YYYY/MM/DD') == '2021/01/04') {
    //             return true;
    //         }
    //         return false;
    //     }
    // }, function (data) {
    //     console.log(data)
    // })
    // document.querySelector("#destroy").click(function () {
    //     date.destroy();
    // })
    // var datetime = new XNDatepicker(document.querySelector("#datetime"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'datetime',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     // minDate:'2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    // }, function (data) {
    //     console.log(data)
    // })
    // var month = new XNDatepicker(document.querySelector("#month"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'month',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     // minDate:'2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    // }, function (data) {
    //     console.log(data)
    // })
    // var year = new XNDatepicker(document.querySelector("#year"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'year',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     // minDate:'2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    // }, function (data) {
    //     console.log(data)
    // })
    // var daterange = new XNDatepicker(document.querySelector("#daterange"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'daterange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     // minDate:'2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    // }, function (data) {
    //     console.log(data)
    // })
    // var monthrange = new XNDatepicker(document.querySelector("#monthrange"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'monthrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     // minDate:'2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    // }, function (data) {
    //     console.log(data)
    // })
    // var yearrange = new XNDatepicker(document.querySelector("#yearrange"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'yearrange',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     // minDate:'2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    // }, function (data) {
    //     console.log(data)
    // })
    // var week = new XNDatepicker(document.querySelector("#week"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'week',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     // minDate:'2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    // }, function (data) {
    //     console.log(data)
    // })
    // var multiple = new XNDatepicker(document.querySelector("#multiple"), {
    //     // format:'YYYY-MM-DD',
    //     type: 'multiple',//year/month/date/multiple/ week/datetime/datetimerange/ daterange/monthrange/yearrange
    //     multipleDates: [],//当为多选日期类型时的初始值
    //     startTime: '',
    //     // endTime:'2036-04-04',
    //     minDate: '2019-04-04',
    //     maxDate: '',
    //     separator: ' 到 ',
    //     showType: 'modal',
    //     linkPanels: false,//面板联动
    //     showClear: true,//是否显示清除按钮
    //     autoConfirm: true,
    //     showShortKeys: true,
    //     autoFillDate: true,//自动变更element里面的值
    // }, function (data) {
    //     console.log(data)
    // })
</script>

</html>
